<template>
    <div>
      {{obj.name}}
      {{obj.id}}
    </div>
</template>

<script>
export default {
  // 只要声明到data的数据都是响应式的
  // 就是 数据改变时会通知视图也进行改变
  // 如果定义的data外部则是非响应式数据  改变不会触发视图更新
  // 问题  及在外部定义 也希望他是响应式的怎么办? 
  // this.$set(对象, 键值, 值); // 创建一个响应式数据
  // 响应式原理 虚拟dom diff算法
  data() {
    return {
      obj: {
        // 响应式
        name:"kkk"
      }
    }
  },
  created() {
    // this.obj['id']=1 
    this.$set(this.obj, 'id', 1)
    setTimeout(()=>{
      this.obj.id =2
    },1000)
  }
}
</script>

<style>

</style>